<template>
	<div>
		<a-table :columns="columns" :data-source="list" bordered :loading="loading" :pagination="pagination">
			<template :slot="col" slot-scope="text, record, index"
				v-for="col in ['firstType','firstTypeNum','firstTypeSize','secondType','secondTypeNum','secondTypeSize','thirdType','thirdTypeNum','thirdTypeSize']">
				<div :key="col">
					<a-input placeholder="请输入" :value="record[col]" @change="e => changeList(e.target.value, record.colourid, col)"/>
				</div>
			</template>
			<!-- <template slot="operation"  slot-scope="text, record, index">
				<a-button type="primary" @click="save(record)">
				      保存
				</a-button>
			</template> -->
		</a-table>
		<div class="btn">
			<a-button type="primary" @click="save" style="margin-right: 20px">保存</a-button>
			<a-button type="primary" @click="cancel">返回</a-button>
		</div>
	</div>
</template>
<script>
	import {
		getNewStyleTypeNumber,
		updateNewStyleTypeNumber
	} from '@api/spection/index'
	export default {
		name: 'Piece',
		data() {
			return {
				username: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
				columns: [{
						title: '颜色id',
						dataIndex: 'stycolorid',
						key: 'stycolorid'
					},
					{
						title: '样衣号',
						dataIndex: 'sampleCode',
						key: 'sampleCode'
					},
					{
						title: '销售色',
						dataIndex: 'stycolorName',
						key: 'stycolorName'
					},
					{
						title: '第一个类型',
						dataIndex: 'firstlType',
						key: 'firstType',
						scopedSlots: {
							customRender: 'firstType'
						}
					},
					{
						title: '第一个类型件数',
						dataIndex: 'firstTypeNum',
						key: 'firstTypeNum',
						scopedSlots: {
							customRender: 'firstTypeNum'
						}
					},
					{
						title: '第一个类型尺码',
						dataIndex: 'firstTypeSize',
						key: 'firstTypeSize',
						scopedSlots: {
							customRender: 'firstTypeSize'
						}
					},
					{
						title: '第二个类型',
						dataIndex: 'secondType',
						key: 'secondType',
						scopedSlots: {
							customRender: 'secondType'
						}
					},
					{
						title: '第二个类型件数',
						dataIndex: 'secondTypeNum',
						key: 'secondTypeNum',
						scopedSlots: {
							customRender: 'secondTypeNum'
						}
					},
					{
						title: '第二个类型尺码',
						dataIndex: 'secondTypeSize',
						key: 'secondTypeSize',
						scopedSlots: {
							customRender: 'secondTypeSize'
						}
					},
					{
						title: '第三个类型',
						dataIndex: 'thirdType',
						key: 'thirdType',
						scopedSlots: {
							customRender: 'thirdType'
						}
					},
					{
						title: '第三个类型件数',
						dataIndex: 'thirdTypeNum',
						key: 'thirdTypeNum',
						scopedSlots: {
							customRender: 'thirdTypeNum'
						}
					},
					{
						title: '第三个类型尺码',
						dataIndex: 'thirdTypeSize',
						key: 'thirdTypeSize',
						scopedSlots: {
							customRender: 'thirdTypeSize'
						}
					},
				],
				list: [],
				pagination: false,
				loading: false,
				value: '',
				ipagination: {
					current: 1,
					size: 10,
					pageSize: ['10', '20', '30', '40'],
					total: 50
				},
				roleForm: {},
				visible: false
			}
		},
		mounted() {
			console.log(2)
			this.getList()
		},
		methods: {
			async save(row){
				console.log(row)
				this.list.forEach(e => {
					e.username = this.username.value.phone
					e.jobNumber = this.username.value.workNo
					e.roleCodeList = this.username.value.roleCode
				})
				let data = {}
				data['newStyleTypeNumberDtoList'] = this.list
				await updateNewStyleTypeNumber(data).then(res => {
					if (res.code == 200) {
						this.$message.success('保存成功')
						this.getList()
					} else {
						if (res.msg) {
							this.$message.error(res.msg)
						} else {
							this.$message.error('获取待办列表失败！')
						}
					}
				})
			},
			changeList(rowVal, rowId, rowkey) {
				const newData = [...this.list]
				const target = newData.find(item => rowId === item.colourid);
				if (target) {
					target[rowkey] = rowVal;
					this.list = newData;
				  }
				console.log(target)
			},
			async getList() {
				const res = await getNewStyleTypeNumber(this.$route.query.billNo)
				if (res.code == 200) {
					this.list = res.data
					console.log(this.list)
				} else {
					if (res.msg) {
						this.$message.error(res.msg)
					} else {
						this.$message.error('获取待办列表失败！')
					}
				}
			},
			savebtn() {
				console.log(this.list)
				// this.$router.push('/spection/Designlist/index')
			},
			cancel() {
				this.$router.push({
					path:'/spection/Designlist/index',
					query: {
					  billNo: this.$route.query.billNo 
					}
				})
			}
		}
	}
</script>
<style scoped lang="less">
	.btn {
		margin: 40px 0 0 50%;
	}
</style>